<template>
  <section class="canvas-area-page u-f u-f1" @click="changeCurrentCom('')">
    <p class="bread-crumbs u-f u-f-ac u-fw">
      <span
        >当前页： {{ appInfo.pages[currentPageIndex].name }}。 页面宽度为
        375px，高度为{{
          appInfo.pages[currentPageIndex].config.height || '667px'
        }}
        。</span
      >
      <span style="color: #ff4d4f"
        >请直接按照 375px 的 UI
        设计稿进行绘制，如设计稿是其他尺寸的，则按比例转成 375px
        大小，再进行绘制。</span
      >
    </p>
    <draggable
      class="draggable"
      :style="pageStyle"
      v-model="appInfo.pages[currentPageIndex].components"
      :group="{ name: 'menu' }"
      :sort="true"
      item-key="key"
      @add="handleAdd"
      @update="handleUpdate"
    >
      <!-- <template #item="{ element }">
        <div @click="handleComponentsClick(element)">
          {{ element.name }} -- {{ element.key }}
        </div>
      </template> -->
      <template #item="{ element }">
        <component
          v-if="element.components"
          :is="element.componentName"
          :list="element"
          v-model:children="element.components"
          drawing
        ></component>
        <component
          v-else
          :is="element.componentName"
          :list="element"
          drawing
        ></component>
      </template>
    </draggable>
  </section>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useRoute } from 'vue-router'
import draggable from 'vuedraggable'
import { useAppMock } from '@/hooks/usePageJson'
import { PageInfoConfig } from '@/hooks/usePageJson.type'
import { BasicItem } from '@/assets/ts/basic-material/basic-components.type'
import sText from '@/packages/basic-material/s-text/index.vue'
import sButton from '@/packages/basic-material/s-button/index.vue'
import sInput from '@/packages/basic-material/s-input/index.vue'
import sImage from '@/packages/basic-material/s-image/index.vue'
import flexContainer from '@/packages/basic-material/flex-container/index.vue'

interface DragAddCustomEvent {
  newIndex: number
  oldIndex: number
}

export default defineComponent({
  name: 'AppCanvasArea',
  components: {
    draggable,
    sText,
    sButton,
    sInput,
    sImage,
    flexContainer,
  },
  setup() {
    const route = useRoute()

    const { appInfo, currentPage, changeCurrentCom } = useAppMock(
      route.params.id as string
    )

    const currentPageIndex = computed(() => {
      return appInfo.pages.findIndex((item) => {
        return item.key === currentPage.value
      })
    })

    const pageStyle = computed(() => {
      const result: Partial<PageInfoConfig> = {
        height: '667px',
      }
      const page = appInfo.pages.find((item) => {
        return item.key === currentPage.value
      })

      if (page?.config.height) {
        result.height = page?.config.height
      }

      if (page?.config.backgroundImage) {
        result.backgroundImage = `url('${page?.config.backgroundImage}')`
        result.backgroundSize = page?.config.backgroundSize
          ? page?.config.backgroundSize
          : '100% 100%'
        result.backgroundRepeat = page?.config.backgroundRepeat
          ? page?.config.backgroundRepeat
          : 'no-repeat'
      }

      if (page?.config.backgroundColor) {
        result.backgroundColor = page?.config.backgroundColor
      }

      return result
    })

    const handleAdd = (event: DragAddCustomEvent) => {
      console.log('画布区域中的索引', event.newIndex)
      console.log('基础组件中的索引', event.oldIndex)
    }

    const handleUpdate = (event: DragAddCustomEvent) => {
      console.log(event, 'update')
    }

    const handleComponentsClick = (comp: BasicItem) => {
      console.log(comp, '点击组件')
    }

    return {
      appInfo,
      currentPageIndex,
      pageStyle,
      handleAdd,
      handleUpdate,
      handleComponentsClick,
      changeCurrentCom,
    }
  },
})
</script>

<style lang="less" scoped>
.canvas-area-page {
  position: relative;
  padding: 80px 0 60px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  &::-webkit-scrollbar {
    display: none;
  }
  .bread-crumbs {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    padding-left: 12px;
  }
  .draggable {
    position: relative;
    width: 375px;
    height: 667px;
    margin: auto;
    // overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
  }
}
</style>